<style>
  .toolbar{
    position: fixed;
      top: 150px;
      right: 0;
      width: 162px;
      z-index: 9999;}
  .toolbar .tool{
      min-height: 48px;
      position: relative;
      right: 0;
      margin-bottom: 8px;
      cursor: pointer;
  }
  .toolbar .tool-bg{
    background: url(./img/toolbar.png) no-repeat;
      width: 162px;
      height: 48px;
      position: absolute;
      top: 0;
      right: -107px;
      z-index: 200;
  }
  .toolbar .tool-ico3{
      background: url(./img/icon3.png) no-repeat center center;
  }
  .toolbar .tool-ico{
      width: 55px;
      height: 48px;
      float: left;
  }
  .toolbar .tool-label{
      width: 107px;
      height: 100%;
      color: #ccc;
      line-height: 48px;
      position: absolute;
      right: 0;
      top: 0;
  }
  .toolbar .tool3 .tool-label .txt, .toolbar .tool6 .tool-label .txt,.tool5 .tool-label .txt, .toolbar .tool10 .tool-label .txt{
      margin-top: 10px;
      line-height: 16px;
  }
  .toolbar .tool .txt{
      padding-left: 3px;
      width: 104px;
      height: 100%;
      display: block;
      font-size: 14px;
  }
  .toolbar .tool3 .tool-label .txt span, .toolbar .tool6 .tool-label .txt span,.toolbar .tool5 .tool-label .txt span, .toolbar .tool9 .tool-label .txt span, .toolbar .tool10 .tool-label .txt span{
      font-size: 12px;
      color: #666;
      display: block;
  }
  .toolbar .tool .tool-info{
      display: none;
      min-height: 80px;
      position: relative;
      top: 30px;
      margin-bottom: 40px;
      z-index: 100;
      left: 0;
      padding: 30px 0 6px;
      width: 100%;
      background: #383838;
  }
  .toolbar .tool .tool-info input{
      width: 142px;
      height: 24px;
      line-height: 24px;
      background: #fff;
      border: 0;
      display: block;
      margin: 0 auto;
      text-align: center;
      font-size: 12px;
      color: #333;
  }
  .toolbar .tool .tool-info .validate{
      font-size: 12px;
      color: #c39a4e;
      display: block;
      text-align: center;
      margin-top: 5px;
  }
  .toolbar .tool5 .tool-info .phoneway{
      border: 1px #707070 solid;
      background: #373737;
      color: #F5C062;
      margin-left: 10px;
      padding: 0 4px;
  }
  .toolbar .tool5 .tool-info .phoneway option{
      color: #B1B1B1;
  }
  option {
      font-weight: normal;
      display: block;
      white-space: pre;
      min-height: 1.2em;
      padding: 0px 2px 1px;
  }
  .toolbar .tool7 .tool-info .tool-btn.phone-submit{
      margin: 0 auto;
      display: block;
      width: 64px;
      background: url(./img/btnphone.png) no-repeat;
  }
  .toolbar .tool-ico5 {
      background: url(./img/icon6.png) no-repeat center center;
  }
  .toolbar .tool .tool-info .tool-btn{
    display: block;
      background: url(./img/btn.png) no-repeat;
      width: 78px;
      height: 24px;
      text-align: center;
      line-height: 24px;
      font-size: 14px;
      color: #fff;
      margin: 6px auto 0;
  }
  .toolbar .tool-ico6{
      background: url(./img/icon11.png) no-repeat center center;
  }
  .toolbar .tool-ico10{
      background: url(./img/icon12.png) no-repeat center center;
  }
  .toolbar .tool .arrow{
    opacity: 1;
      background: url(./img/icon-arrow.png) no-repeat;
      width: 16px;
      height: 9px;
      display: block;
      position: absolute;
      top: 20px;
      right: 10px;
  }
  .toolbar .tool10 .tool-info div.qrcode{
      width: 110px;
      height: 112px;
      margin: 0px auto;
      background: url(./img/bg.png) no-repeat center center;
      cursor: pointer;
  }
  .toolbar .tool7{
      margin-bottom: 15px;
  }
  .toolbar .tool-ico7 {
      background: url(./img/icon5.png) no-repeat center center;
  }
  .toolbar .close-btn{
      width: 55px;
      background: url(./img/toolbar.png) no-repeat;
      height: 48px;
      text-align: center;
      line-height: 48px;
      font-size: 12px;
      color: #ac8145;
      display: block;
      right: 0;
      position: absolute;
      top: 0;
  }
  .toolbar .top{
      background: url(./img/icon8.png) no-repeat;
      width: 48px;
      height: 48px;
      position: absolute;
      right: 5px;
      display: none;
  }
  .qq_code,.wx_code,.gz_code{display: inline-block;margin-top: 10px;}
  .qq_code,.wx_code,.gz_code{width: 100%;height: 100%;}

</style>

<div class="toolbar">
  <div class="tool tool3">
    <div class="tool-bg" style="right: -107px;">
      <span class="tool-ico tool-ico3 h"></span>
      <div class="tool-label">
        <div class="txt">
                          在线客服
          <span>7天x24小时</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- 电话 -->
  <div class="tool tool7">
    <div class="tool-bg" style="right: -107px;">
      <span class="tool-ico tool-ico7 h"></span>
      <div class="tool-label">
        <div class="txt">
          电话回拨
          <a href="##" class="arrow btn-open"></a>
        </div>
      </div>
    </div>
    <div class="tool-info" style="right: -107px; display: none;">
      <input type="text" id="phone1" placeholder="请输入正确的手机号码" maxlength="11">
      <span class="validate" id="erromessage">请输入正确的手机号码</span>
      <a href="#" class="tool-btn phone-submit">点击确认</a>
    </div>
  </div>
  
  <!-- qq -->
  <div class="tool tool5">
    <div class="tool-bg notpointer" style="right: -107px;">
      <span class="tool-ico tool-ico5 h"></span>
      <div class="tool-label">
        <div class="txt">
          2388887799
          <span>官方QQ</span>
        </div>
      </div>
    </div>
  </div>
  <!-- wx -->
  <div class="tool tool6">
    <div class="tool-bg notpointer" style="right: -107px;">
      <span class="tool-ico tool-ico6 h"></span>
      <div class="tool-label">
        <div class="txt">
          cs-88jbc
          <span>官方微信</span>
        </div>
      </div>
    </div>
  </div>
  <!-- wx公众号 -->
  <div class="tool tool10" style="display:none;">
    <div class="tool-bg" style="right: -107px">
      <span class="tool-ico tool-ico10 h"></span>
      <div class="tool-label">
        <div class="txt">
          cs-88jbc
          <span>微信公众号</span>
          <!-- <a href="##" class="arrow btn-open"></a> -->
        </div>
      </div>
    </div>

    <!--<div class="tool-info" style="right: -107px; display: none;">
      <div class="qrcode"></div>
      <span class="validate">
        扫描下载凯发电
        <br>
        游官方APP
      </span>
    </div> -->
  </div>
<!--   <div class="tool tool8">
    <div class="tool-bg" style="right: -107px;">
      <a href="#">
        <span class="tool-ico tool-ico7 h"></span>
        <div class="tool-label">
          <div class="txt">
            免费试玩
          </div>
        </div>
      </a>
    </div>
  </div> -->
  <!--<div class="tool tool7">
    <a href="#" class="close-btn" ishold='0'>展开</a>
  </div> -->
  <a href="#" id="top" class="top" style="display: none; opacity: 1;"></a>

  <div class="qq_code" style="position: relative; left: -1px; display: none;">
        <img src="./img/jbc-qq.png" alt="">
  </div>
  <div class="wx_code" style="position: relative; left: -1px; display: none;">
        <img src="./img/jbc-wxkf.png" alt="">
  </div>
  <div class="gz_code" style="display: none;position: relative;left: -20px;">
        <img src="./img/jbc-gzh.png" alt="">
  </div>
</div>